<script setup lang="ts">
import HeaderNav from "~/components/common/HeaderNav.vue";

const {name} = useAppConfig()

const router = useRouter()
function goHome() {
  router.replace({path: '/'})
}
function goLogin() {
  navigateTo({
    path: '/login'
  })
}
function goRegister() {
  navigateTo({
    path: '/register'
  })
}
</script>

<template>
  <div id="app">
    <header class="flex justify-between h-100px lh-100px">
      <!--图片-左-->
      <div class="img-left"></div>
      <!--标题-->
      <div 
        class="flex-1 flex justify-between overflow-hidden cursor-pointer">
        <div class="title flex items-center" @click="goHome">
            <img src="/img/icon.png" alt="">
          <div class="name ml-20px text-#333333 font-500 text-30px">{{ name }}</div>
        </div>
        <!--登录按钮-->
        <div class="login-tool">
          <span @click="goLogin">登录</span>
          <span class="mx-10px text-#333333">|</span>
          <span @click="goRegister">注册</span>
        </div>
      </div>
      <!--图片- 右-->
      <div class="img-right"></div>
    </header>
    <HeaderNav/>
    <main class="content">
      <NuxtPage keepalive>
      </NuxtPage>
    </main>
    <footer class="">

      <CommonFooter></CommonFooter>
    </footer>
  </div>
</template>

<style scoped lang="scss">
#app {
  height: 100%;
  overflow: auto;
}
.content {
  min-height: 500px;
}
* {
  font-family: Source Han Sans CN, Source Han Sans CN;
}
.img-left {
  width: 306px;
  height: 100px;
  margin-right: 55px;
  background-image: url("/img/header/header-left.png");
  background-size: auto 100%;
}
.img-right {
  width: 306px;
  height: 100px;
  margin-left: 55px;
  background-image: url("/img/header/header-right.png");
  background-size: auto 100%;
}
</style>